import React, { useEffect } from 'react'
import './recommend.scss'
let icon = require('../../../../image/icon/xing.png')
let iconActive = require('../../../../image/icon/xing_active.png')
export default function Recommend(props) {
  const { recommendList } = props

  const list = recommendList.map((recommend, index) => {
    return (
      <li key={recommend.id}>
        <div className="img">
          <img src={recommend.src} />
        </div>
        <span className="title">{recommend.title}</span>
        <span className="summey">{recommend.summey}</span>
        <a
          className="keep"
          onClick={() => {
            props.onClick(index)
          }}
        >
          {recommend.isTrue ? (
            <img className="icon" src={iconActive} />
          ) : (
            <img className="icon" src={icon} />
          )}
        </a>
      </li>
    )
  })
  return (
    <div className="recommend">
      <ul>{list}</ul>
    </div>
  )
}
